Captiva

A beautiful WordPress and WooCommerce Theme

• created: 07/11/2014
• latest update: 07/23/2014
• by: CommerceGurus
• email: support@commercegurus.com

Thank you for purchasing our theme! If you have any questions that are beyond the scope of this help file and our video tutorials, please feel free to email us to support@commercegurus.com. Thanks so much!

After you download Captiva Theme

Inside the zip file you download from themeforest you'll find a number of different directories, including:

• DemoData - this directory contains all the demo data you need to setup Captiva to it's full potential.
• Documentation - the main theme documentation. If you're reading this, you've figured that directory out already :)
• Licensing - the main themeforest and theme licensing files.
• Themeinstall - This is where you'll find the main theme file itself - captiva.zip which you'll be uploading into WordPress.

Getting started

We've spent a lot of time to keep things as simple as possible for you to get Captiva up and running quickly. The easiest way to get started is to follow our Video Tutorials below.

How to update Captiva

The best way to update Captiva is to use the Envato Toolkit which will:

• Notify you when a theme update is available
• Offer you the option to backup your files in advance (strongly recommended!)
• Automatically update your version of Captiva to the latest version.

How to customize Captiva

The best way to customize Captiva (and thus avoid having to do manual updates!) is to use a child theme. Captiva is fully compatible with WordPress child themes. For more on child themes, see http://codex.wordpress.org/Child_Themes).

How to contact support

To get the most out of Captiva please take the time to go through the documentation in detail. We've covered off most of the things you'll need to know to get up and running and to enjoy Captiva as we intended it. If you still can't find the answer to a question you have, we'd be more than happy to help you out. Just in get touch directly with our support team via email support@commercegurus.com and we'll be in touch within 24 hours with an initial response.  

Theme install and initial setup

The first video covers the initial theme install and setup process.

Prerequisites

This video assumes you have the following setup in advance:

• Your have your own hosting platform running up to date stable versions of Apache/nginx, PHP, MySQL.
• You have installed the latest version of self hosted WordPress (V3.9.1 at the time of writing).
• You have logged in to WordPress and are looking at the WordPress dashboard.

Assuming the above, the video below starts right at that point so grab a cup of coffee (or something stronger!) and sit back and watch the install process from start to finish. I recommend you watch it through at least once before then going into your own WordPress and watching the video again while pausing and following the steps taken in the video. It should only take you 5-10 minutes to complete the process if you do it this way :)

WooCommerce Setup

Once you're up and running with the main install, we have another video tutorial which walks you through some of the WooCommerce theme options provided by Captiva.

Widget Setup

Next up it's a short video detailing how to setup widgets for Captiva.

Theme installation

If you can't view the videos or just prefer to install the theme from scratch manually this section will guide you through the process.

Installing WordPress

We'll make the assumption that you've got yourself hosting account capable of installing WordPress :) In order to install the current version of WordPress, please go to http://wordpress.org and download the current version. For information on how to install a WordPress Platform, please see the WordPress codex page.

Installing the theme

When you are ready to install a theme, you must first upload the theme to your WordPress directory. There are two ways you can install the theme: Using FTP: By using any FTP program of your choice you can upload the non-zipped folder to the /wp-content/themes/ folder on your server. Using WordPress: Navigate to Appearance > Themes > Install Themes. Go to upload and select the zipped theme folder (captiva.zip) and hit install now and theme will be uploaded and installed. Once you have uploaded the theme, you need to activate it. To activate your new theme, go to Appearance > Themes and activate your chosen theme.

Installing the Required Plugins

Once you've activated Captiva, you'll be prompted to install a set of plugins which are required to get the most out of Captiva. The message will look like this:

Click the "Begin Installing plugins" option. You'll then see this screen.  

For simplicity, tick the checkbox just under Bulk actions and from the Bulk options dropdown select "Install" and click "Apply". This will install all plugins that you'll need for the theme. Activate Plugins Once all plugins are installed you should return to the Required plugins screen and activate all plugins using the same bulk actions menu process. You'll know you've done everything correctly when you see this confirmation.   

Installing WooCommerce

Once you've completed installing all plugins, click back into Plugins and you should see a little prompt from WooCommerce prompting you to install WooCommerce pages. Go ahead and do that now by clicking "Install WooCommerce pages". You'll then be presented with the WooCommerce "Thanks, all done!" welcome page. You're now ready to move on to setting up WooCommerce and the rest of the theme :)

Configure catalog thumbnail sizes

When Captiva is installed on a fresh copy of WordPress and WooCommerce it will set product image thumbnail sizes to be optimized for the theme. To confirm these have been set correctly, go to WooCommerce->Settings->Products and scroll down to "Product Image Sizes". You should see the following.

If you see different image dimensions you should change them to match the dimensions above. If you've already been using WooCommerce with another theme it's likely that the thumbnail dimensions were different to that recommended for Captiva. As a result, we recommend you use the Regenerate thumbnails plugin to regenerate thumbnails to be optimized for Captiva.

Regenerate Thumbnails Go to Tools->Regen. Thumbnails and click "Regenerate All Thumbnails". If you have a lot of thumbnails this may take a few minutes to complete.

Source image sizes We recommend you source images are at least 500px * 750px to ensure they appear correctly in Captiva.

How to upload a Product Category banner

We made one small enhancement to the WooCommerce->Products->Categories section. When you are adding/editing a product category you will now see  an option called "Product Category banner". This is designed to allow you to upload a large product category banner like the one on display below.

These banner images need to be at least 1400px wide and 300px high.

If would like to pre-populate your website to look like the Captiva Theme Demo site, the theme comes with a Demo Data xml file which you can import directly into WordPress as follows:

• Go to Tools->Import
• Click "WordPress" - you may be prompted to install the WordPress data importer. Proceed with the plugin install if required.
• On the "Import WordPress" screen, select "Choose file" and select the file /CAPTIVA_PACKAGE/DemoData/content/captivadatademo.xml
• Click "Upload file" to start the upload process.
• You will be asked if you wish to Download and import file attachments. Check the tickbox and process with the import.
• The import may take 1-2 minutes to complete. If the import times out you may need to ask your hosting company to increase the timeout limit on your server.
• We've created a stripped down xml file with placeholder images replacing the images you'll see on the demo site to ensure the import process is a quick as possible.
• Once the import process is complete you'll see a note like this

You're now ready to proceed with configuring the rest of the theme. If you choose not to import the Demo Data you can proceed with adding content pages which we'll go through a little bit later in the docs. If you choose to start adding products and categories to WooCommerce manually, be sure to check out the following good guides by WooThemes:

WooCommerce - Getting Started

WooCommerce - Product Setup    

Captiva has 2 WordPress Menu locations:

• Primary Menu - this is your primary website menu which appears next to your website logo.
• Top Menu - this is a menu location right at the very top of your website which is a useful location for adding a secondary menu for things like the WooCommerce "My Account" menu.

To setup your menus you will first need some pages! Once you've got some pages, go to Appearance->Menus. If you imported the Demo Data you will see something like this.

By default the Primary Menu is selected. To assign this menu to a theme location, check the Primary Menu checkbox and hit "Save Menu". This will assign the Primary Menu to the Primary Menu theme menu location. Once this has been assigned, go checkout your homepage for the first time in this tutorial and you should see something like this.

Your primary menu has been setup correctly!

A little bit more about the Primary Menu

The primary menu location supports single column dropdown and multicolumn mega dropdowns as demonstrated with the demo data.

Single column dropdowns

In the Primary menu any child pages will automatically be added to a single column dropdown.

So this structure:

Will become this on the frontend:

Mega Dropdown To setup a mega dropdown, you'll need to do the following:

• Setup Parent and child page menu items just like you would do for a single column dropdown, except this time instead of one Parent->Child group of pages, you'll now create multiple Parent->Child groups under a single Parent item. Confused? Let's illustrated with an example :)

Now to make this a Mega Dropdown you'll need to add a custom css class to the main parent item. To do that, you'll first need to do the following: Scroll up to the top of your WordPress screen and click the "Screen Options" menu. This will reveal a pull down menu from the top of the screen. Check select boxes for "CSS Classes" and "Description".

You can now close the Screen Options menu. Now back down in your menu expand the main parent menu item - in our example above that's the "Shortcodes" menu item. Enter the following values:

• URL: Make it a "#" symbol.
• Navigation Label: This is what your menu item will be in the menu itself.
• CSS Classes: "menu-full-width" (This is the magic sauce that changes this into a Mega Dropdown.)

Adding images to your menu Captiva also supports adding images to Mega Dropdowns as follows:

• Create a custom menu item
• Give it a navigation label which will serve as a heading which will appear just above your image
• The url should be a "#"
• Create a custom menu child item
• Navigation label should be "image"
• CSS Classes should be: "image-item"
• The Description field should be a path to an image on your server as follows:

The end product of all this work will be a super looking Mega Dropdown a bit like this one:

And that's your Primary Menu setup complete!

Homepage Setup If you've imported the demo xml, a series of homepages have already been created for you. To assign one to be your homepage:

• Go to Settings->Reading
• Select the Radio button "A static page" under "Front page displays"
• I personally recommend "Homepage - eCommerce" if you've imported the demo xml. If not, go ahead and and assign your own preferred page to be your homepage.
• For the "Posts page", select any of the 3 blog pages provided with the demo xml "Blog, Blog with Left Thumbnail or Blog with Right Thumbnail"
• Hit "Saves changes"
• Go to your website and you should now see your homepage

Things are starting to take shape! You'll notice that there's no slider appearing yet. Fear not, we'll get to that shortly! Before that we'll keep going and setup widgets for our site.    

Captiva has a number of different widget areas setup by default, including:

• Left Sidebar Menu - displays widgets on pages created with the Default page template
• Right Sidebar Menu - displays widgets on pages created with the Right Sidebar page template
• Sidebar - displays widgets on blog posts and pages 
• Top Bar - Search box - displays widgets added to the very top part of the page - this is really designed to be used for adding a search box to the top of your website
• Shop Sidebar - displays widgets on your shop pages when you have shop sidebar active
• First Footer - displays widgets in the first of two footer rows. This widget area works best with a max. of 4 widgets added to it.
• Second Footer - displays widgets in the second of two footer rows. This widget area works best with a max. of 4 widgets added to it.

Creating your own widget areas

The theme installs the excellent WooSidebars which lets you create your own custom widget areas if you so wish. To do so:

• Go to Appearance->Widget Areas
• Click "Add new"
• Add a Name and Description
• You then need to decide how you would like the new widget area to work. You have a lot of flexibility as to how widget areas appear. I highly recommend checking out the WooSidebars docs http://docs.woothemes.com/document/woosidebars-2/ for full details.

Adding widgets to your Widget areas

You can setup your widgets according to your own preferences. For the demo site, we have setup the following widgets.

Right Sidebar

• Advanced Sidebar Menu - This is a clever little widget which will automatically display child pages on a parent page. I recommend the settings as displayed below.
• Search

Left Sidebar Exact same setup as Right Sidebar

Sidebar

Top Bar - Search box

If you're using WPML, this is also where we recommend you add your Language Selector.

Shop sidebar

First Footer

Second Footer

For the Second Footer, you'll notice in the text widget we're also using one of our Captiva Shortcodes which we'll be looking at a little bit later.

Advanced widget settings on the Shop Sidebar

For some of the more sophisticated widgets illustrated above in the Shop Sidebar, here is a little bit more detail on how exactly these widgets are configured in Captiva.

WooCommerce Product Categories

YITH WooCommerce Ajax Navigation - Filter by Size

YITH WooCommerce Ajax Navigation - Filter by Season

That should be everything you need to setup widgets!            

Captiva ships with a really comprehensive set of easy to use Theme Options.

To access the Theme Options, go to WordPress->Captiva Theme Options. Theme Options include:

• Global settings - set boxed/full width layout, responsive mode, preloaders, body background colors and images.
• Colors - set the main colors used across your site. If you prefer you can select from a series of predefined color skins.
• Logos and icons - upload your logo and favicons. Your logo will automatically be downsampled for optimal display on retina devices. i.e. If you upload an 800*300px logo, it will be downsampled to 400px*150px on the website to ensure optimal display on retina devices.
• Top bar - enable/disable the top bar.
• Header settings - fine grained control over the height of your header.
• Main menu settings - fine grained control over your main menu typography, color, sticky mode.
• Footer settings - change footer text like Copyright information and whether to display Footer widget areas.
• Typography - complete control over all typography on your website. The font list automatically loads all Google fonts.
• WooCommerce  General Settings - lots of options to allow you to do things like enable catalog mode, hide prices, hide categories underneath product names and show/hide credit cards you accept in your footer.
• WooCommerce Product Details - fine grained control over the layout of your product details pages including the position of the Shop Sidebar, Size Guide image and title, Social sharing icons and Delivery and Returns data.
• WooCommerce Product Listings - fine grained control of your category/listing pages including sidebar position, Grid/List layout mode, number of products per row, number of products per page, and show/hide Shop announcements.
• Custom code - allows you to add custom css directly via Theme options.
• Import/Export - allows you to import and export your theme options. This is very useful when moving your site to another server or if you're setting up another site running Captiva in the future.

When you first activate Captiva, I suggest you review your Theme Options and then Save Changes at least once to ensure all options are set correctly for the first time.

Accessing theme options from the native WordPress Theme Customizer.

For now, I recommend you use the main Theme Options interface via WordPress->Captiva Theme Options as it tends to work best. But if you prefer to use the new native WordPress Theme Customizer you'll be glad to know that you can update nearly all theme options via WordPress->Appearance->Customize aswell!

Using Layer Slider

We're huge Layer Slider fans. We think it's the best WordPress slider plugin available. So we've also bundled that for you with the theme :) The quickest way to get up and running with Captiva's Layer Slider slides is to import the Demo Data slides provided with the theme. To import the Demo Data slides complete the following steps:

• Go to LayerSlider WP -> All Slides
• Look for the "Import & Export Sliders" metabox.
• Click the "Choose file" option within the "Import Sliders" box.
• Browse to CAPTIVA_PACKAGE/DemoData/layerslider/slides/LayerSlider_Export_2014-07-11_at_09.57.13.json
• Select and upload this file.
• The import process should only take a moment.

Once complete you should have 4 sliders as follows.

Take not of the ID's assigned to the slides you just imported. To add one of these sliders to one of your content pages (e.g. a Homepage for example), open up your homepage and if you've already used one of the demo data homepages provided you should see something like this right at the top of the page.

You can edit which slider now appears on your homepage by clicking the edit icon in the Layer Slider Visual Composer box and then selecting which slider you wish to display.

Save your page. Setup Layer Slider fonts The final step with Layer Slider is to setup Layer Slider fonts. The demo slides use a number of great looking Google fonts. To configure these for Layer Slider:

• Go to Layer Slider-> All Sliders
• Look for the Load Google Fonts metabox. It should look like this.

Delete:

• Open Sans
• Indie Flower
• Oswald

In the bottom right hand side, you're going to add some new fonts.

• Quicksand:700
• Dancing Script:Regular

In order to add these fonts, you should type the first few characters, then hit search which should return both fonts straight away. When you're finished click "Save changes". Your slides should now load correctly! In addition to this initial introduction to Layer Slider for Captiva, we have also included very detailed documentation for Layer Slider itself in /CAPTIVA_PACKAGE/Documentation/layerslider  

Page Templates

Captiva ships with a number of pre-defined Page templates which make managing content that little bit easier, including:

• Default template - this is the default WordPress page template. This page template includes a left sidebar which by default will display the contents of the "Sidebar" widget area.
• Blog with left thumbnail - a blog page template which will display blog posts along with a thumbnail floated to the left of each blog post. The thumbnail is the featured image within the blog post.
• Blog with right thumbnail - the same as the previous template but with the featured image on the right.
• Full width page - no sidebars on this one - just your page content..
• Homepage - This is the same as the full width page but it doesn't show the page title as it's a homepage.
• Right sidebar - similar to the Default template but with the sidebar on the right hand side.
• Showcase:: 2 columns - A 2 column page template to display your Showcases/Portfolio items.
• Showcase:: 3 columns - A 3 column page template to display your Showcases/Portfolio items.
• Showcase:: 4 columns - A 4 column page template to display your Showcases/Portfolio items.
• Testimonials archive - An archive page template for testimonials
• WooCommerce page - this template should be assigned to your some of your WooCommerce pages like: Cart, Checkout and My Account.

Assigning a page template to a page

• Go to Pages->Add new
• In the right hand side you will see a "Page Attributes" area which has the "Template" dropdown.
• Select a template from the dropdown.
• Add your page content
• Click Update/Publish

Page Banners It's possible to add a nice banner image across the top of your page when creating a new page. At the top of your "Add New" page screen you should see the "Page Banner" metabox as follows:

Page Banner Image: Upload/select an image from your media library that's at least 1400px wide. (and ideally 1900px wide at least). Page Banner height: Let's you set the height of the banner. The page title will automatically be added to the center of the banner. See an example here:

Examples of other page templates in action

• Full width page
• Left sidebar
• Right sidebar
• Blog with right thumbnail
• Blog with left thumbnail
• Homepage
• WooCommerce page
• Showcase 2 col
• Showcase 3 col
• Showcase 4 col
• Showcase archive
• Single Blog post
• WooCommerce Category page
• WooCommerce Single Product page

Shortcodes and Visual Composer

In addition to the specific page templates listed above, you'll notice Captiva ships with a lot of other types of pages with all sorts of goodies included in them. These don't use specific page template per se. They are brought to life through a combination of the wonderful Visual Composer plugin and a series of Shortcodes and custom post types we have made which are bundled in the Captiva Toolkit plugin.

Using Visual Composer

Visual Composer is one of the best Page builder plugins available for WordPress. It allows you to quickly make complex page layouts with minimal technical skills. We've shipped lots of example pages in the demo data provided with the theme. In addition to the demo data, we've also provided a copy of the Visual Composer docs in the /CAPTIVA_PACKAGE/Documentation/visualcomposer folder. I would recommend spending some time to read these in detail to fully understand how to use Visual Composer.

Using Ultimate Addons for Visual Composer

Not only do we include Visual Composer for you but we've also bundled Ultimate Addons for Visual Composer for you aswell :) You can find out more about Ultimate Addons here. We've also included separate documentation for Ultimate Addons in /CAPTIVA_PACKAGE/Documentation/ultimateaddons.

Captiva Shortcodes integrated into Visual Composer

We've deeply baked in some interfaces to our Captiva Toolkit shortcodes right into the Visual Composer user interface. To access these shortcodes in Visual Composer: When you're creating a new page in WordPress click the "Backend Editor" button which will activate Visual Composer.

Go ahead and create a new row and then hit the large plus symbol (+) which will open the shortcode lightbox. You should see an option called "Captiva Shortcodes". Go ahead and click on Captiva Shortcodes which will filter down the list of shortcodes we've integrated into Visual Composer. The best way to get to know what each of these do is through experimentation. Most of them are very simple. The most complex one which we use a lot in the demo data provided with the theme is the "Captiva Content Strip" shortcode which is a very powerful and flexible shortcode. We think of content strips as sophisticated content banners which sit within visual composer columns and allow you to quickly create highly original elements on page layouts. Here is an example of a series of content strips on a single Visual Composer page. As you can see, content strips can be simple banners with text and color, through to more complex strips with imagery, buttons and animations.

Captiva Content Strip Options

• Content Strip height - set the height of the strip.
• Link to wrap around content strip - If you want the entire strip to be clickable add a link to wrap around it.
• Content Area Width - set the width the content within the strip will take up. This should be set as a percentage.
• Bottom Margin - Add a bottom margin in px to the strip.
• Message box background color - The background color of the strip.
• Vertical Position - This is the vertical position of the content within the strip.
• Horizontal Position - This is the horizontal position of the content within the strip.
• Text alignment - Not to be confused with horizontal positioning, this is the alignment of the content independent of it's position.
• Text color - for now - just 2 simple options - Light/Dark.
• Text animation effect - choose from a series of predefined animation effects to apply to the content within the strip upon load.
• Text fade out on scroll - activating this will add a "Medium" style fade out upon scrolling down the page.
• Custom content css class - if you want to really target a specific strip with custom css you can add a custom class name here.
• Content - the actual content of the strip itself.
• Content strip background image - if you want to add an image to the strip you can select one here from the media library.
• Type of background - if you upload an image you should set the background type to Parallax image.

The demo data is particularly useful for providing lots of examples of how to use Visual Composer to create really beautiful content pages with Captiva.

Custom Post Types and the Captiva Toolkit plugin

During the theme install process one of the plugins you should have installed is the Captiva Toolkit. Captiva Toolkit is a dedicated plugin created specially for the Captiva theme which provides enhanced functionality for the theme including shortcodes and custom post types. In the past, these kind of things were integrated directly into the theme. It's now better to keep this kind of functionality in a plugin so if you switch to another theme in the future you won't lose your content.

Captiva Shortcodes - we explored these briefly in the last section. Detailed examples of all shortcodes are provided with the Demo Data. In addition to Captiva Shortcodes, the following custom post types are provided by the Captiva Toolkit:

Showcases - These are sometimes called Portfolios in other themes. Showcases are essentially the same :) We've already covered Showcases in detail a little earlier under Page templates. Featured images for Showcases should be at least 1400px if possible. On a showcase details page you can choose to display a gallery of images or a Youtube/Vimeo video. The page will not display both. It will check and see if there is an Video ID present and if not it will attempt to load photos from the Showcase gallery. To add photos to the showcase gallery click the "Manage Gallery" button and then add and re-order gallery images as normal.

Testimonials - Testimonials is a simple custom post type that lets you manage a list of testimonials which you can then use a testimonials shortcode to display a carousel of testimonials on a page like your homepage.

Top Reviews - Think of Top Reviews as a way of creating a curated list of your top product reviews and recommendations. You may not necessarily want all your product reviews automatically appearing on your homepage. If that's the case, use Top Reviews instead to create lists like this.

Logos - Logos is a simple custom post type that lets you create a carousel of logos to add to your homepage for example.

Announcements - Announcements is another simple custom post type that let's you create simple little broadcast announcement messages which then appear in your product category listing pages. Announcements auto cycle in a carousel and can be switched off from Captiva Theme Options as covered earlier.

We recommend you use Poedit to translate the theme into your desired language. The theme has been fully tested with Poedit for translation capability and you will find lang files (.po/.mo) in /captiva/languages/.

For frontend content translations, we recommend WPML. The theme has been fully tested with WPML.

Thanks again for purchasing Captiva. We're constantly expanding and refining our documentation so be sure to head over to http://commercegurus.com for lots more tips and tutorials on managing your Captiva powered eCommerce website.

Please do not hesitate to contact our support team 24*7*365 on support@commercegurus.com

Thanks!